<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px"
      />
      <el-button type="primary" class="filter-item" style="margin-left: 10px" @click="open2">
        查询
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        class="filter-item"
        @click="open2"
      >
        重置
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="filter-item"
        @click="dialogVisible = true"
      >
        新增
      </el-button>
      <el-button type="primary" class="filter-item" @click="open2">
        <svg-icon icon-class="excel" style="margin-right: 5px" />
        导入
      </el-button>
      <el-button type="primary" class="filter-item" @click="open2">
        <svg-icon icon-class="excel" style="margin-right: 5px" />
        导出
      </el-button>
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        class="filter-item"
        @click="delete1"
      >
        删除
      </el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column fixed prop="date" label="日期" width="150" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="province" label="内容" width="120" />
      <el-table-column prop="city" label="提交" width="120" />
      <el-table-column prop="address" label="缘由" width="300" />
      <el-table-column prop="zip" label="数据" width="120" />
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="small"
            @click="handleClick(scope.row)"
          >查看</el-button>
          <el-button type="primary" size="small" @click="open2">编辑</el-button>
          <el-button type="danger" size="small" @click="open2">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {

  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2021-05-02',
          name: '人员1',
          province: '数据提交',
          city: '数据整理',
          address:
            '预案',
          zip: '有效参数'
        },
        {
          date: '2021-05-01',
          name: '人员2',
          province: '数据分析',
          city: '完成分析',
          address: '测试功能',
          zip:
            '不舒服'
        },
        {
          date: '2021-05-03',
          name: '人员3',
          province: '提供方案',
          city: '完成',
          address: '测试功能',
          zip:
            '见王总'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    delete1() {
      this.$message('删除成功')
    },
    open2() {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    }
  }
}
</script>
